<template>
    <div class="my-class-schedule">
        <p class="title">
            <img src="/static/images/icon/icon_schedule.png">
            <span>{{$t("workbench.myClassSchedule")}}</span>
        </p>
        <div class="class-schedule-table">
            <MyLesson :data="lessonData"/>
        </div>
    </div>
</template>
<script>
import MyLesson from "common/src/components/common/MyLesson";
import {
    getStudentClassSchedule,
    getTeacherClassSchedule
} from "common/src/api/myClassSchedule";

export default {
    name: "MyClassSchedule",
    props: {
        loginUserType: {
            type: String
        },
        schoolCalendarObj: {
            type: Object,
            default: null
        }
    },
    data() {
        return {
            lessonData: []
        };
    },
    created() {
        if (this.schoolCalendarObj)
            this.getClassSchedule(
                this.schoolCalendarObj.schoolCalendar.id,
                this.schoolCalendarObj.week
            );
    },
    components: {
        MyLesson
    },
    methods: {
        // 获取我的课表数据
        getClassSchedule(calendarId, week) {
            // 根据loginUserType判断角色是教师还是学生   为 '2'是教师 ''是学生
            if (this.loginUserType === "2" && calendarId) {
                getTeacherClassSchedule(calendarId, week).then(res => {
                    if (res.code === 200 && res.data) {
                        this.lessonData = res.data;
                    }
                });
            } else if (this.loginUserType === "" && calendarId) {
                getStudentClassSchedule(calendarId, week).then(res => {
                    if (res.code === 200 && res.data) {
                        this.lessonData = res.data;
                    }
                });
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.my-class-schedule {
    // padding: 24px;
    height: 100%;
    overflow: hidden;
    .title {
        font-size: 18px;
        color: #2b3b4e;
        letter-spacing: 0;
        line-height: 24px;
        margin-bottom: 4px;
        font-weight: bolder;
        img {
            width: 24px;
            height: 24px;
            vertical-align: middle;
            margin-right: 8px;
        }
        span {
            vertical-align: middle;
        }
    }
    .class-schedule-table {
        margin-top: 14px;
        height: 230px;
        overflow: auto;
        &::-webkit-scrollbar {
            /*滚动条整体样式*/
            width: 6px;
            height: 1px;
        }
        &::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 3px;
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            background: #d4d8dc;
        }
        &::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            background: #fff;
        }
    }
}
</style>
